<template>
	<div name="Header">
		<div class="box">
			<div class="Header">
				<div class="HeaderLeft">
					<div class="HeaderLeftLogo">
						<div class="logo"></div>
					</div>
				</div>
				<div class="HeaderContent">
					<ul>
						<li style="width: 142px;"></li>
						<li v-on:mouseenter="moveList" v-for="(item,index) in headerList" v-bind:key="index" :id="index"><a :href="item.url">{{item.name}}</a></li>
	
					</ul>
				</div>
				<div class="HedaerRight">
					<form class="Search" action="">
						<input type="search" :class="isClickSearch?'searchText clickInput':'searchText'" v-model="search" @click="clickSearh" @blur="searchLeave"/>
						<button type="submit" :class="isClickSearch?'searchInput iconfont clickInputButton':'searchInput iconfont'" style="border-left: none;" value="">
							&#xe651;
						</button>
						<div class="lable" v-show="!isClickSearch">
							<span>小米9 pro</span>
							<span>红米电视</span>
						</div>
						<div class="searchChange" v-show="isClickSearch">
							<ul>
								<li>小米9</li>
								<li>家电</li>
								<li>小米手机</li>
								<li>红米电视</li>
								<li>小米10</li>
								<li>小米CC9 Pro</li>
							</ul>
							
						</div>
					</form>
				</div>
			</div>
			 <transition name="fade">
				
				<div class="HeaderList" v-show="show" v-on:mouseenter="moveList" v-on:mouseleave="outList">
					<div class="make"  v-on:mouseenter="outList"></div>
					<ul class="Limit">
						<li v-for="(item,index) in shop" v-bind:key="index">
							<img :src="item.img"></img>
							<p>{{item.name}}</p>
							<p>{{item.money}}</p>
						</li>
					</ul>
					<div class="makeContent"></div>
				</div>
				
			</transition>
		</div>
	</div>
</template>

<script>
	export default{
		name:"Header",
		data(){
			return {
				shopList:[],//导航下面的手机列表
				shop:[],//导航的单个手机列表
				headerList:[],//导航列表
				show: false,//是否显示导航商品
				search:"",///搜索的值
				isClickSearch:false	//是否点击搜索框
			}
		},
		methods:{
			//鼠标移动到导航上
			moveList:function(e){
				var index=e.target.id;
				this.show=true;
				if(index!="")
					this.getShopList(index);
			},
			//鼠标移开导航
			outList:function(e){
				this.show=false;
			},
			//加载导航商品
			getShopList:function(e){
				var that = this;
				that.shop=that.shopList[e];
			},
			//点击搜索框
			clickSearh:function(e){
				this.isClickSearch=true;
			},
			//离开搜索框
			searchLeave:function(e){
				this.isClickSearch=false;
			}
		},
		computed:{
			
		},
		mounted() {
			var that = this;
			this.$http.get("/api/ShopList.json").then(function(res){
				that.shopList=res.data;
			})
			//加载导航底部的商品
			this.$http.get("/api/Header.json").then(function(e){
				that.headerList=e.data;
			})
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~style/var.styl'
	.Header
		width 100%
		height 100px;
		background-color #fff;
		.HeaderLeft
			width 62px;
			height 100%;
			float left;
			display flex
			justify-content center
			align-items center
			.HeaderLeftLogo
				width 55px;
				height 55px;
				background-color $bgcolor;
				.logo
					width 55px;
					height 55px;
					background url(//s02.mifile.cn/assets/static/image/mi-logo.png) no-repeat 50% 50%;
		.HeaderContent
			width 850px;
			height 100%;
			float left;
			line-height 100px;
			ul li
				display inline-block;
				padding 0 7px
				color #333;
				font-size 16px
		.HedaerRight
			height 100%;
			float right;
			display flex
			justify-content center
			align-items center
			.Search
				width 296px;
				height 50px;
				position relative
				.lable
					position absolute;
					top: 17px;
					right: 62px;
					z-index: 2;
					text-align: right;
					cursor pointer
					span
						background-color #efefef;
						padding 4px 6px
						margin-right 5px;
					span:hover
						background-color $bgcolor
						color #fff
				.searchText
					width 245px
					height 100%
					position absolute
					left 0
					border: 1px solid #e0e0e0;
					text-indent 10px
				.searchInput
					width 51px
					height 50px;
					background-color #fff;
					border none
					position absolute
					right 0
					border: 1px solid #e0e0e0;
					border-left none
	.HeaderList
		position absolute;
		left 0;
		right 0;
		top:100px;
		width 100%;
		height 229px;
		z-index 1
		overflow hidden
		border-top: 1px solid #e0e0e0;
		background-color #fff;
		text-align center
		-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.18);
		box-shadow: 0 3px 4px rgba(0,0,0,.18);
		-webkit-transition: height .3s,-webkit-box-shadow .2s;
		transition: height .3s,-webkit-box-shadow .2s;
		transition: box-shadow .2s,height .3s;
		transition: box-shadow .2s,height .3s,-webkit-box-shadow .2s;
		ul li
			padding-top 35px
			display inline-block;
			width 201px
			height 201px
			color #333;
			font-size 16px
			font-size 12px;
			position relative
			cursor pointer;
			p:nth-child(3)
				color $bgcolor
		ul li::before
			position: absolute;
			left: 0;
			top: 35px;
			z-index: 1;
			width: 1px;
			height: 100px;
			content: "";
			background-color: #e0e0e0;
		ul li:first-child::before
			background-color: #fff;
			
		img
			width 160px
			height 110px
	.fade-enter-active, .fade-leave-active {
	  transition: opacity .3s;
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	  opacity: 0;
	}	
	.make
		position fixed
		top 0
		left 0
		width 362px
		height 100px
	.makeContent
		position fixed
	.clickInput
		border: 1px solid $bgcolor!important;
	.clickInputButton
		border: 1px solid $bgcolor!important;
		border-left:0!important
	.searchChange
		position absolute
		z-index 3
		background-color #fff;
		top 50px
		width 243px
		border: 1px solid $bgcolor!important;  
		border-top:0!important
		ul li
			height 30px
			line-height 30px
			padding-left 10px
		ul li:hover
			background-color #f9f9f9;
</style>